<template>
<view class="all-container">
  <view class="question-container">
    验证问题：{{ question }}
  </view>
  <view class="apply-container" v-for="(joinInfo, index) in joinInfo" :key="index">
    <view class="avatar-name">
      <image :src="joinInfo.avatar" mode="scaleToFill" class="apply-avatar"/>
      <view class="apply-name">{{ joinInfo.userName }}</view>
    </view>
    <view class="apply-reason">回答：{{ joinInfo.joinReason }}</view>
    <view class="two-button">
      <button class="refuse-button" @click="refuseJoin(joinInfo.id, index)">拒绝</button>
      <button class="agree-button" @click="agreeJoin(joinInfo.id, index)">同意</button>
    </view>
  </view>
  <view v-if="isJoinInfoEmpty" class="no-apply">暂时没有收到加入申请哦~</view>
</view>
</template>

<script>
export default {
  data() {
    return {
        joinInfo: [],
        tuanId: '',
        question: ''
    };
  },

  computed: {
    isJoinInfoEmpty() {
      return !this.joinInfo || this.joinInfo.length === 0;
    }
  },
  onLoad(options) {
    console.log("获取上个页面传过来的信息",options)
    this.tuanId = options.tuanId;
    this.question = options.question;
    this.getJoinInfo(this.tuanId);
  },

  methods: {
    refuseJoin(id, index){
      uni.showModal({
        title: '',
        content:'是否拒绝该加入申请？',
        success:(res)=>{
          if (res.confirm) {
          //点击了确定
          uni.$http
              .delete(`/join/refuseJoin?id=${id}`)
              .then((res) => {
                const responseData = res.data;
                if(responseData.code === 200){
                  uni.showToast({
                    title: '已拒绝该申请',
                    icon: 'success',
                    duration: 2000
                  });
                  this.joinInfo.splice(index, 1);
                }else{
                  console.log(responseData);
                  uni.showToast({
                  title: '拒绝申请失败',
                  icon: 'none'
                });
                }
              })
              .catch((err) => {
                console.error('拒绝加入申请失败:', err);
                uni.showToast({
                  title: '拒绝申请失败',
                  icon: 'none'
                });
              });
          }else if (res.cancel) {
            console.log('用户取消了拒绝操作');
          }
        },
      })
    },
    agreeJoin(id, index){
      uni.showModal({
        title: '',
        content:'是否同意该加入申请？',
        success:(res)=>{
          if (res.confirm) {
          //点击了确定
          uni.$http
              .post(`/join/agreeJoin?id=${id}`)
              .then((res) => {
                const responseData = res.data;
                if(responseData.code === 200){
                  uni.showToast({
                    title: '已同意该申请',
                    icon: 'success',
                    duration: 2000
                  });
                  this.joinInfo.splice(index, 1);
                }else{
                  console.log(responseData);
                  uni.showToast({
                  title: '同意申请失败',
                  icon: 'none'
                });
                }
              })
              .catch((err) => {
                console.error('同意加入申请失败:', err);
                uni.showToast({
                  title: '同意申请失败',
                  icon: 'none'
                });
              });
          }else if (res.cancel) {
            console.log('用户取消了同意操作');
          }
        },
      })
    },
    getJoinInfo(tuanId) {
        uni.$http
        .get(`/tuan/getJoinInfo?tuanId=${this.tuanId}`)
        .then((res) => {
            const responseData = res.data;
            if (responseData.code === 200) {
                this.joinInfo = responseData.data;
                console.log(this.joinInfo);
            }else{
                console.log(responseData);
            }
        })
        .catch((err) => {
            console.error('获取加入申请信息失败:', err);
            uni.showToast({
                title: '获取申请失败',
                icon: 'none'
            });
        });
    }
  }
};
</script>

<style lang="scss">
.all-container {

  .question-container {
    padding: 5px 5px;
    background-color: #bababa52;
    flex-wrap: wrap; /* 允许换行 */
    display: flex;
  }
}

.apply-container {
  background-color: #ffffff;
  margin-bottom: 5px;
}

.avatar-name {
  display: flex;
  padding: 5px;

  .apply-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-right: 5px;
  }

  .apply-name {
    max-width: 160px;
    white-space: nowrap; /* 防止换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 省略号显示 */
  }
  
}

.apply-reason {
    padding: 0 5px;
  }

.two-button {
  display: flex;
  margin-top: 6px;

  .refuse-button {
    flex: 1;
    background-color: #d2d2d2;
    color: #ffffff;
    border-radius: 5px;
  }
  .agree-button {
    flex: 1;
    background-color: #fbd269;
    color: #ffffff;
    border-radius: 5px;
  }
}

.no-apply {
  text-align: center;
  padding-top: 150px;
}
</style>